<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" th:href="@{/css/stylelogin.css}">
    <link rel="stylesheet"  th:href = "@{/css/style_inner.css}">
    <link rel="stylesheet" th:href = "@{https://fonts.googleapis.com/css?family=Lato}">
    <link rel='stylesheet prefetch' th:href = "@{https://fonts.googleapis.com/icon?family=Material+Icons}">
    <link rel="stylesheet" th:href = "@{/css/demo.css}">
    <link rel="stylesheet"  th:href = "@{/plugins/xcConfirm/xcConfirm.css}">
    <link rel="stylesheet"th:href = "@{https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css}">
    <!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
    <script th:src = "@{https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js}"></script>
    <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
    <script th:src = "@{https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js}"></script>
    <script th:src = "@{/plugins/xcConfirm/xcConfirm.js}"></script>
    <style>
        .registerform li {
            padding-bottom: 20px;
        }

        .Validform_checktip {
            margin-left: 10px;
        }

        .registerform .label {
            display: inline-block;
            width: 70px;
        }

        .action {
            padding-left: 92px;
        }
    </style>
    <script>
        function getUrlParms(name){
            //获得页面url的某个url参数的方法
            var reg = new RegExp("(^|&)"+ name +"=([^&]*)(&|$)");
            var r = window.location.search.substr(1).match(reg);
            if(r!=null)
                return unescape(r[2]);
            return null;
        }
        var id = getUrlParms("rslt");
        console.log(id);
        if(id=="1"){
            $(function () {
                var txt=  "用户名或密码错误";
                // console.log(txt);
                window.wxc.xcConfirm(txt, window.wxc.xcConfirm.typeEnum.error);
            })
        }
        if(id=="2"){
            $(function () {
                var txt=  "用户名或密码错误";
                window.wxc.xcConfirm(txt, window.wxc.xcConfirm.typeEnum.error);
            })
        }
        if(id=="3"){
            $(function () {
                var txt=  "注册成功，请登录";
                window.wxc.xcConfirm(txt, window.wxc.xcConfirm.typeEnum.success);
            })
        }
        if(id=="4"){
            $(function () {
                var txt=  "重置密码成功，请重新登录";
                window.wxc.xcConfirm(txt, window.wxc.xcConfirm.typeEnum.success);
            })
        }
        if(id=="5"){
            $(function () {
                var txt=  "重置密码失败，请重新重置";
                window.wxc.xcConfirm(txt, window.wxc.xcConfirm.typeEnum.success);
            })
        }
    </script>



</head>

<body style="width: 100%;">

<div class="cotn_principal">
    <div class="cont_centrar">
        <br>
        <br>
        <br>
        <br>
        <div class="cont_login">
            <div class="cont_info_log_sign_up">
                <div class="col_md_login">
                    <div class="cont_ba_opcitiy">
                        <h2>登录</h2>
                        <p>说尽向来无限事</p>
                        <button class="btn_login" onClick="cambiar_login()">LOGIN</button>
                    </div>
                </div>
                <div class="col_md_sign_up">
                    <div class="cont_ba_opcitiy">
                        <h2>注册</h2>
                        <p>高山流水觅知音</p>
                        <button class="btn_sign_up" onClick="cambiar_sign_up()">REGISTER</button>
                    </div>
                </div>
            </div>
            <div class="cont_back_info"></div>
            <div class="cont_forms">

                <div class="cont_form_login">

                    <div class="wrap">
                        <ul class="tabs group">
                            <li><a style="height: 60px;" class="active" href="#/one">用户名密码登录</a></li>
                            <li><a style="height: 60px;" href="#/two">手机短信登录</a></li>
                        </ul>

                        <div id="content">
<!--                            使用账号密码登陆-->
                            <form id="accountlogin"method="post" th:action="@{/user/loginWithNicknameAndPassword}">
                                <p id="one" >
                                    <input style="position: relative; top: 20px;" type="text"
                                           name="nickname"
                                           placeholder="请输入用户名" value="hadwinling"/>
                                    <input style="position: relative; top: 20px;" type="password"
                                        name="password"  placeholder="请输入密码" value="123123"/>
                                    <th:if test="${empty cookie.userCookie.value }">
                                        <input style="position: absolute; left: -100px; top: 152px;"
                                               type="checkbox" name="flag" value="1" />
                                    </th:if>
                                    <th:if test="${not empty cookie.userCookie.value }">
                                        <input style="position: absolute; left: -100px; top: 152px;"
                                               type="checkbox" checked="checked" name="flag" value="1" />
                                    </th:if>
<!--                                    <span style="position: absolute; left: 50px; top: 170px;">记住密码</span>-->
                                    <a th:href="@{/user/toResetpage}"><span
                                            style="position: absolute; left: 220px; top: 170px;">忘记密码</span></a>
                                    <button class="btn_my_login"
                                            style="position: absolute; top: 200px; left: 60px"
                                            type="submit">登录</button>
                                </p>
                            </form>
<!--                            使用手机验证码登陆-->
                            <form id="textlogin" class="demoform">
                                <p class="ex" id="two" hidden>
                                    <input style="position: relative; top: 85px;" id="tel" type="text" placeholder="请输入手机号码" />
                                    <input class="btn_my_login" id="vcode"
                                        style="position: relative; top: 98px; color: #eeeeee; text-align: center; width: 200px"
                                        onClick="sendText()" value="发送验证码" />
                                    <input
                                        style="position: relative; top: 100px;" id="userCode"
                                        type="password" placeholder="请输入验证码" />
                                    <button class="btn_my_login"
                                            style="position: relative; top: 120px;" id="tellogin">登录</button>
                                </p>
                            </form>
                        </div>
                    </div>
                </div>
                <div class="cont_form_sign_up" >
<!--                    注册-->
                    <form style="position: relative; top: -15px;" class="registerform" id="register"
                          th:action="@{/user/register}"
                          method="post">
                        <li style="position: relative; top: 20px; left: -65px; list-style-type: none;">
                            <label class="label" style="position: relative; font-size: 14px; top: 10px; color: #996666;">用户名：</label>
                            <input style="position: relative; padding: 15px 5px; margin-left: 10px; margin-top: 20px;
                             width: 180px; border: none; text-align: left; color: #757575; background-color: #fff"
                                   type="text" id="reguname" name="nickname" class="inputxt" />
                            <span style="position: absolute; left: 200px; top: 80px;" id="unametip"></span>
                        </li>
                        <li style="position: relative; top: 15px; left: -65px; list-style-type: none;">
                            <label class="label" style="position: relative; left: 7px; top: 10px; font-size: 14px; color: #996666;">密 码：</label>
                            <input style="position: relative; padding: 15px 5px; margin-left: 10px; margin-top: 20px; width: 180px; border: none; text-align: left; color: #757575; background-color: #fff" type="password" value="" name="password" class="inputxt" />
                        </li>
                        <li style="position: relative; top: 12px; left: -65px; list-style-type: none;">
                            <label class="label" style="position: relative; left: -6px; top: 10px; font-size: 14px; color: #996666; width: 80px;">确认密码：</label>
                            <input style="position: relative; left: -5px; padding: 15px 5px; margin-left: 10px; margin-top: 20px; width: 180px; border: none; text-align: left; color: #757575; background-color: #fff" type="password" value="" name="verificationpsw" class="inputxt" />
                        </li>
                        <li style="position: relative; top: 13px; left: -65px; list-style-type: none;">
                            <label class="label" style="position: relative; left: -6px; top: 10px; color: #996666; font-size: 14px; width: 80px;">手机号码：</label>
                            <input style="position: relative; left: -5px; padding: 15px 5px; margin-left: 10px;
                            margin-top: 20px; width: 180px; border: none; text-align: left; color: #757575;
                            background-color: #fff" id="regtel" type="text" value="" name="tel" class="inputxt" />
                            <span id="teltip" style="position: absolute; top: 75px; left: 212px;"></span>
                        </li>

                        <li style="position: relative; top: 15px; left: -45px; list-style-type: none;">
                            <input class="btn_my_login" id="btn" style="position: relative; top: -7px;" type="button" onclick="sendMessage()" value="发送手机短信验证码" />
                        </li>
                        <li style="position: relative; top: -10px; left: -65px; list-style-type: none;">
                            <label class="label" style="font-size: 14px; position: relative; top: 10px; color: #996666;">验证码：</label>
                            <input style="position: relative; padding: 15px 5px; margin-left: 10px; margin-top: 20px; width: 180px; border: none; text-align: left; color: #757575; background-color: #fff" id="code" type="text" value="" name="text" class="inputxt" />
                        </li>
                        <div class="action" style="position: relative; top: 20px; left: -90px">
                            <input type="button" style="position: relative; top: -38px;" id="lo" disabled class="btn_my_login" value="提 交" />
                        </div>
                    </form>
                </div>
            </div>
        </div>
<!--        忘记密码-->
        <div class="modal fade" id="myModal" tabindex="-1" role="dialog"
             aria-labelledby="myModalLabel">
            <div class="modal-dialog" role="document">
                <div class="modal-content" style="width: 460px;">
                    <div class="modal-header" style="background-color: #F0DAD2">
                        <button type="button" class="close" data-dismiss="modal"
                                aria-label="Close">
                            <span aria-hidden="true"></span>
                        </button>
                        <h4 class="modal-title" id="myModalLabel">请完善您的信息</h4>
                    </div>
                    <div class="modal-body" style="background-color: #F0DAD2">
                        <form class="registerform" th:action="@{/user/perferUser}" method="post">
                            <li
                                    style="position: relative; margin: 0 auto; list-style-type: none;">
                                <label class="label"
                                       style="position: relative; left: -23px; font-size: 15px; color: #996666; top: 10px;">用户名：</label>

                                <input
                                        style="position: relative; left: -45px; padding: 15px 5px; margin-left: 10px; margin-top: 20px; width: 180px; border: none; text-align: left; color: #757575; background-color: #fff"
                                        type="text" id="perfectuname" name="nickname" class="inputxt" />
                                <span style="position: absolute; left: 200px; top: 80px;"
                                      id="perunametip"></span>
                            </li>
                            <li
                                    style="position: relative; margin: 0 auto; list-style-type: none;">
                                <label class="label"
                                       style="position: relative; left: -12px; top: 10px; color: #996666; font-size: 14px">密
                                    码：</label> <input
                                    style="position: relative; left: -45px; padding: 15px 5px; margin-left: 10px; margin-top: 20px; width: 180px; border: none; text-align: left; color: #757575; background-color: #fff"
                                    type="password" value="" name="password" class="inputxt" />
                            </li>
                            <li
                                    style="position: relative; margin: 0 auto; list-style-type: none;">
                                <label class="label"
                                       style="position: relative; left: -28px; top: 10px; color: #996666; font-size: 14px; width: 80px;">确认密码：</label>
                                <input
                                        style="position: relative; left: -50px; padding: 15px 5px; margin-left: 10px; margin-top: 20px; width: 180px; border: none; text-align: left; color: #757575; background-color: #fff"
                                        type="password" value="" name="verificationpsw" class="inputxt" />
                            </li> <input hidden id="hiddenTel" name="tel" />
                            <div class="action"
                                 style="position: relative; top: 20px; left: -20px">
                                <input type="submit"
                                       style="position: relative; top: -20px; width: 90px; left: -72px;"
                                       class="btn_my_login" value="提 交" /> <input type="reset"
                                                                                  style="position: relative; top: -20px; width: 90px; left: 40px;"
                                                                                  class="btn_my_login" value="重 置" />
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<script type="text/javascript" src="../static/js/indexlogin.js" th:src="@{/js/indexlogin.js}"></script>
<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"th:src="@{https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js}"></script>
<script type="text/javascript" src="../static/js/index_inner.js"th:src="@{/js/index_inner.js}"></script>
<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"th:src="@{https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js}"></script>
<script type="text/javascript" src="../static/js/Validform_v5.3.2.js"th:src="@{/js/Validform_v5.3.2.js}"></script>


<script type="text/javascript">

    $(function(){
        //$(".registerform").Validform();  //就这一行代码！;

        var demo=$(".registerform").Validform({
            tiptype:3,
            label:".label",
            showAllError:false,
            ajaxPost:false,
        });

        demo.addRule([
            {
                ele:".inputxt:eq(1)",
                datatype:"*6-20"
            },
            {
                ele:".inputxt:eq(2)",
                datatype:"*6-20",
                recheck:"password"
            }
        ]);

    })
</script>

<script>
    // 注册时检查昵称是否已经存在
    $("#reguname").blur(function () {
        var content = $("#reguname").val();
        // console.log("昵称："+content)
        if(content.length<5||content.length>20){
            $("#unametip").html("")
            $("#unametip").removeClass()
            $("#unametip").addClass("wrong")
            $("#unametip").html("用户名必须是5到20位字符")
            $("#lo").attr("disabled",true)
        }else{
            $.ajax({
                type:"get",
                url:"[[@{/user/namecheck}]]",
                data:"nickname="+content,
                success:function (message) {
                    if(message=="0"){
                        $("#unametip").html("用户名已被占用")
                        $("#unametip").removeClass()
                        $("#unametip").addClass("wrong")
                        $("#lo").attr("disabled",true)
                    }else {
                        $("#unametip").html("ok")
                        $("#unametip").removeClass()
                        $("#unametip").addClass("right")
                        $("#lo").attr("disabled",false)
                    }
                }
            })
        }
    })
</script>
<script>
    $("#perfectuname").blur(function () {
        var content = $("#perfectuname").val();
        if(content.length < 5||content.length>20){
            $("#perunametip").html("")
            $("#perunametip").removeClass()
            $("#perunametip").addClass("wrong")
            $("#perunametip").html("用户名必须是5到20位字符")
        }else{
            $.ajax({
                type:"get",
                url:"[[@{/user/namecheck}]]",
                data:"uname="+content,
                success:function (message) {
                    if(message=="0"){
                        $("#perunametip").html("用户名已被占用")
                        $("#perunametip").removeClass()
                        $("#perunametip").addClass("wrong")
                    }else {
                        $("#perunametip").html("ok")
                        $("#perunametip").removeClass()
                        $("#perunametip").addClass("right")
                    }
                }
            })
        }
    })
</script>
<!--短信倒计时相关-->
<script type="text/javascript">
    var InterValObj; //timer变量，控制时间
    var count = 60; //间隔函数，1秒执行
    var curCount;//当前剩余秒数
    function sendMessage(){
        curCount = count;
        $("#btn").attr("disabled", "true");
        $("#btn").val(curCount + "秒后可重新发送");
        InterValObj = window.setInterval(SetRemainTime, 1000); //启动计时器，1秒执行一次请求后台发送验证码 TODO
    }
    //timer处理函数
    function SetRemainTime() {
        if (curCount == 0) {
            window.clearInterval(InterValObj);//停止计时器
            $("#btn").removeAttr("disabled");//启用按钮
            $("#btn").val("重新发送验证码");
        }
        else {
            curCount--;
            $("#btn").val(curCount + "秒后可重新发送");
        }
    }
</script>
<!--短信-->
<script>
    var sms="";
    $("#btn").click(function(){
        var tel=$("#regtel").val();
        $.ajax({
            url:"[[@{/user/resetSend}]]",
            type:"get",
            data:{"tel":tel},
            success:function(result){
                sms=result;

            }
        });
    });

    $("#lo").click(function(){
        var code=$("#code").val();
        if(code==""){
            $(function () {
                var txt=  "请输入验证码";
                window.wxc.xcConfirm(txt, window.wxc.xcConfirm.typeEnum.warning);
            })
        }else{
            if(sms==code){
                $(function () {
                    var txt=  "验证码正确";
                    window.wxc.xcConfirm(txt, window.wxc.xcConfirm.typeEnum.success);
                })
                $("#register").submit()
            }else{
                $(function () {
                    var txt=  "验证码错误";
                    window.wxc.xcConfirm(txt, window.wxc.xcConfirm.typeEnum.error);
                })

            };
        };

    });

</script>
<!--验证手机号是否被注册-->
<script>
    $("#regtel").blur(function () {
        var telnum = $("#regtel").val();
        var reg = /^1[345789]\d{9}$/;
        if(!reg.test(telnum)){
            $("#teltip").html("")
            $("#teltip").removeClass()
            $("#teltip").addClass("wrong")
            $("#teltip").html("请输入正确格式")
            $("#btn").attr("disabled","true")
        }else{
            $.ajax({
                type:"get",
                url:"[[@{/user/checktel}]]",
                data:"tel="+telnum,
                success:function (message) {
                    if(message=="1"){
                        $("#teltip").html("ok")
                        $("#teltip").removeClass()
                        $("#teltip").addClass("right")
                        $("#btn").attr("disabled",false) ;

                    }else {

                        $("#teltip").html("电话号码已注册")
                        $("#teltip").removeClass()
                        $("#teltip").addClass("wrong")
                        $("#btn").attr("disabled","true")
                    }
                }
            })
        }
    })
</script>
<!--//短信服务控制-->
<script type="text/javascript">

    var InterValObj1; //timer变量，控制时间
    var lcount = 60; //间隔函数，1秒执行
    var lcurCount;//当前剩余秒数
    function sendText(){
        lcurCount = lcount;
        $("#vcode").attr("disabled", "true");
        $("#vcode").val(lcurCount + "秒后可重新发送");
        InterValObj1 = window.setInterval(SetRemainTime1, 1000); //启动计时器，1秒执行一次请求后台发送验证码 TODO
    }
    //timer处理函数
    function SetRemainTime1() {
        if (lcurCount == 0) {
            window.clearInterval(InterValObj1);//停止计时器
            $("#vcode").removeAttr("disabled");//启用按钮
            $("#vcode").val("重新发送验证码");
        }
        else {
            lcurCount--;
            $("#vcode").val(lcurCount + "秒后可重新发送");
        }
    }
</script>
<!--手机号登陆-->
<script>
    var sms="";
    $("#vcode").click(function(){
        var tel=$("#tel").val();
        $.ajax({
            url:"[[@{/user/resetSend}]]",
            type:"get",
            data:{"tel":tel},
            success:function(result){
                sms=result;
                console.log("验证码为:"+sms);
            }
        });
    });

    $("#tellogin").click(function(){
        var tel=$("#tel").val() ;
        var code=$("#userCode").val();
        console.log(code);
        if(code==""){
            $(function () {
                var txt=  "请输入验证码";
                window.wxc.xcConfirm(txt, window.wxc.xcConfirm.typeEnum.warning);
            })
        }else{
            if(sms==code){
                // $(function () {
                //     var txt=  "验证码正确";
                //     window.wxc.xcConfirm(txt, window.wxc.xcConfirm.typeEnum.success);
                // })
                // 验证码正确
                $.ajax({
                    type:"get",
                    url:"[[@{/user/LoginWithTel}]]",
                    data:"tel="+tel,
                    success:function (message) {
                        console.log("message"+message)
                        if(message=="1"){
                            window.location.href = "[[@{/}]]";
                        }else if(message =="2"){
                            $(function () {
                                var txt = "没有该用户";
                                window.wxc.xcConfirm(txt, window.wxc.xcConfirm.typeEnum.warning);
                            })
                        }
                    }
                })
            }else{
                $(function () {
                    var txt=  "验证码错误";
                    window.wxc.xcConfirm(txt, window.wxc.xcConfirm.typeEnum.error);
                })

            };
        };
    });
</script>
</body>
</html>